<template>
    <div>
        <div class='list-item'>
            <div> {{ item.name }}</div>

            <div class="price-container">
                <div>{{ item.price | currencyRMB }}</div>
                <div class='less' @click='sub'>-</div>
                <div>{{ item.count }}</div>
                <div class='more' @click='add'>+</div>
                <slot></slot>

            </div>
        </div>

    </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
    },
    index: {
      type: Number,
    },
  },
  methods: {
    add() {
      // ? 修改props
      // ? 修改状态，修改原组件状态
      // this.item.count ++;
      this.$emit('add', this.index);
    },
    sub() {
      this.$emit('sub', this.item);
    },
  },
};
</script>

<style lang="scss" >
    .list-item{
            display: flex;
            width: 300px;
            height: 80px;
            justify-content:space-between;
            align-items:center;
            margin: 0 auto;
            font-size: 25px;
        }
    .price-container{
            display: flex;
            width: 100px;
            height:100%;
            align-items:center;
            position: relative;
        }
    .less{
        cursor: pointer;
        /* margin:0 10px 0 10px */
    }
    .more{
        cursor: pointer;
        /* margin:0 10px 0 10px */

    }
</style>
